<template>
    <div>
        <van-nav-bar
        title="营养食谱"
        left-arrow
        @click-left="onClickLeft"
        />
        <van-sidebar :active-key="activeKey" @change="onChange">
            <van-sidebar-item title="阶段" />
            <van-sidebar-item title="功效" />
            <van-sidebar-item title="五谷" />
            <van-sidebar-item title="肉蛋类" />
            <van-sidebar-item title="海鲜类" />
            <van-sidebar-item title="菌类" />
            <van-sidebar-item title="水果类" />
            <van-sidebar-item title="豆制类" />
            <van-sidebar-item title="坚果类" />
        </van-sidebar>
        <div class="list">
            <router-view />

        </div>
    </div>
</template>

<script>
    export default {
        name:'Nutrition',
        data() {
            return { 
                 activeKey: 0
            }
        },
        methods: {
            onChange(key) {
            this.activeKey = key;
            },
             onClickLeft() {
                 this.$router.go(-1)
            }
        },  
    }
</script>

<style scoped>
    .list{
        height: 100%;
        width: 290px;
        position:absolute;
        right: 0;
        top:45px;
        font-size: 14px;
        border-left: 2px solid #bbb;
        padding-left: 10px
    }
</style>